<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Win12 xjq</title>
	<!-- Windows 12 网页版 谭景元原创  -->

	<!-- Windows 12 网页版是一个开放源项目,
	希望让用户在网络上预先体验 Windows 12,
	内容可能与 Windows 12 正式版本不一致。
	使用标准网络技术,例妙如 Html、CSS 和 Javascript
	此项目绝不附属于微软,且不应与微软操作系统或产品混淆,
	这也不是 Windows365 cloud PC
	本项目中微软、Windows和其他示范产品是微软公司的商标 -->
	<link rel="stylesheet" href="./desktop.css" />
	<!-- Apps style -->
	<link rel="stylesheet" href="apps/style/setting.css">
	<link rel="stylesheet" href="apps/style/explorer.css">
	<link rel="stylesheet" href="apps/style/calc.css">
	<link rel="stylesheet" href="apps/style/about.css">
</head>

<body onload="$('#loadback').addClass('hide');setTimeout(() => {$('#loadback').css('display','none')}, 200);">
	<div id="loadback" style="background-color:#000;width:100%;height:100%;z-index:105;position:absolute;opacity:1;transition:200ms;">
		<style>#loadback.hide{opacity:0;}
			loading>svg>circle:first-child{stroke:#fff;fill:none;stroke-width:2px;stroke-linecap:round;
				animation:spin-infinite 1.8s linear 0s infinite normal none running;transform-origin:50% 50%;
				transition: all .2s ease-in-out 0s;}
			loading>svg>circle:last-child{fill:#00000000;}
			loading>svg{background-color: #00000000;border-radius: 50%;}
			@keyframes spin-infinite {0%{stroke-dasharray:.01px,43.97px;transform:rotate(0deg)}
				50%{stroke-dasharray:21.99px,21.99px;transform:rotate(450deg)}
				to{stroke-dasharray:.01px,43.97px;transform:rotate(3turn)}}</style>
		<svg id="loadbacksvg" viewbox="0,0,306,305" style="transition: 1s;opacity: 0;position: absolute;left: calc(50% - 125px);top:20%;"
			width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"/></clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill3"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill4"><stop offset="0" stop-color="#A964C8"/><stop offset="0.18" stop-color="#A964C8"/><stop offset="0.36" stop-color="#A266E4"/><stop offset="0.73" stop-color="#346ED8"/><stop offset="0.91" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)"><path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#fill1)" fill-rule="evenodd"/><path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#fill2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"/><path d="M1163.19 512 1064.8 512 1064.8 512 1064 379.593C1088.35 388.648 1113.49 394.507 1136.24 394.774 1158.49 394.241 1180.75 380.925 1203 374L1203 472.245C1203 494.201 1185.18 512 1163.19 512Z" fill="url(#fill3)" fill-rule="evenodd"/><path d="M39.755 0 138 0 138 0 138 140.549C114.987 150.681 91.9742 159.212 68.9614 158.946 45.1752 160.012 22.9872 145.082 0 138.15L0 39.7981C0 17.8182 17.7989 0 39.755 0Z" fill="url(#fill4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"/></g></svg>
		<loading id="loadbackloading" style="transition:1s;opacity: 0;">
			<svg style="position: absolute;left: calc(50% - 25px);top: 80%;" width="50px" height="50px" viewBox="0 0 16 16">
				<circle cx="8px" cy="8px" r="7px"></circle><circle cx="8px" cy="8px" r="6px"></circle></svg>
		</loading><script>setTimeout(() => {document.getElementById('loadbacksvg').style.opacity=1;
		document.getElementById('loadbackloading').style.opacity=1;}, 100);</script>
	</div>
	<script src="./jq.min.js"></script>
	<!-- 预加载设置图标 -->
	<p style="font-family: SettingsIcons;display: n;">&nbsp;</p>
	<div id="start-menu">
		<!-- 开始菜单 -->
		<div id="s-m-l">
			<div id="s-m-user">
				<svg viewBox="0,0,257,344" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="user-clip0"><rect x="382" y="195" width="257" height="344"/></clipPath><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill1"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill2"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#user-clip0)" transform="translate(-382 -195)"><path d="M637.755 433.872C642.215 515.221 579.577 537.983 508.011 537.983 436.444 537.983 376.676 507.833 383.513 437.11 383.109 425.234 389.59 414.133 398.634 409.891 413.82 402.768 444.753 402.936 507.484 402.997 570.214 403.058 609.164 402.279 621.521 407.947 633.878 413.614 638.011 424.609 637.755 433.872Z" fill="url(#user-fill1)" fill-rule="evenodd"/><path d="M422 285C422 235.847 461.623 196 510.5 196 559.377 196 599 235.847 599 285 599 334.153 559.377 374 510.5 374 461.623 374 422 334.153 422 285Z" fill="url(#user-fill2)" fill-rule="evenodd"/></g></svg>
			</div>
			<p style="width: 100%;text-align: center;margin: -50px 0 20px 0;font-size: 30px;">Administartor</p>
			<input type="text" class="input" alt="hi" placeholder="在这里输入你要搜索的内容" onclick="hide_startmenu();
				$('#search-win').addClass('show-begin');
				setTimeout(() => {
					$('#search-win').addClass('show');
				}, 0);
				$('#search-input').focus();">
			<input-before class="bi bi-search"></input-before>
			<list>
				<p class="text">可用</p>
				<a onclick="showwin('setting');hide_startmenu();">
				<img src="icon/setting.png"><p>设置</p></a>
				<a onclick="showwin('explorer');hide_startmenu();">
				<img src="icon/explorer.png"><p>文件资源管理器</p></a>
				<a onclick="showwin('calc');hide_startmenu();">
				<img src="icon/calc.png"><p>计算器</p></a>
				<a onclick="showwin('about');hide_startmenu();">
					<img src="icon/about.png"><p>关于Win12网页版</p></a>
				<p class="text">其它</p>
				<a><img src="icon/camera.png"><p>相机</p></a>
			</list>
		</div>
		<div id="s-m-r">
			<div class="row1">
				<div class="folder">
					<a class="a sm-app"><img src="icon/folder/docs.png"><p>文档</p></a>
					<a class="a sm-app"><img src="icon/folder/pics.png"><p>图片</p></a>
					<a class="a sm-app"><img src="icon/folder/music.png"><p>音乐</p></a></div>
				<div class="tool">
					<p style="font-size: 40px;margin-bottom: -10px;">12:00</p>
					<p>星期一, 2023年1月1日</p>
					<a class="a btn btn-icon power" onclick="$(this).addClass('show')">
						<span class="bi bi-power"></span>
						<i class="bi bi-power" onclick="$('#start-menu').removeClass('show');
						setTimeout(() => {window.location='shutdown.html';},200);"></i>
						<i class="bi bi-arrow-counterclockwise" onclick="$('#start-menu').removeClass('show');
						setTimeout(() => {window.location='reload.html';},200);"></i>
					</a>
					<a class="a btn btn-icon big" onclick="
					if($('#start-menu').hasClass('max')){
						$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-expand\'></i>');
						$('#start-menu').removeClass('max');
					}else{
						$('#start-menu>#s-m-r>.row1>.tool>.btn-icon.big').html('<i class=\'bi bi-arrows-angle-contract\'></i>');
						$('#start-menu').addClass('max');
					}
					">
						<i class="bi bi-arrows-angle-expand"></i>
					</a>
				</div>
			</div>
			<div class="pinned">
				<!-- 已固定 卡片 -->
				<div class="title">
					<p>已固定</p>
					<div>
						<a class="a more-btn">所有应用 <i class="bi bi-chevron-right"></i></a>
						<!-- 这个好像没什么必要 -->
					</div>
				</div>
				<div class="apps">
					<a class="a sm-app enable" onclick="showwin('calc');hide_startmenu();">
					<img src="icon/calc.png"><p>计算器</p></a>
					<a class="a sm-app"><img src="icon/camera.png"><p>相机</p></a>
					<a class="a sm-app enable jump" href="https://github.com/tjy-gitnub/win12/issues" target="_blank">
					<img src="icon/feedback.png"><p>反馈中心</p></a>
					<a class="a sm-app"><img src="icon/defender.png"><p>Windows 安全中心</p></a>
					<a class="a sm-app enable" onclick="showwin('about');hide_startmenu();"><img src="icon/about.png"><p>关于Win12网页版</p></a>
					<a class="a sm-app enable" onclick="showwin('explorer');hide_startmenu();">
					<img src="icon/explorer.png"><p>文件资源管理器</p></a>
					<a class="a sm-app"><img src="icon/notepad.png"><p>记事本</p></a>
					<a class="a sm-app enable" onclick="showwin('setting');hide_startmenu();">
					<img src="icon/setting.png"><p>设置 </p></a>
					<a class="a sm-app"><img src="icon/store.png"><p>Microsoft Store</p></a>
					<a class="a sm-app"><img src="icon/taskmanager.png"><p>任务管理器</p></a>
					<a class="a sm-app"><img src="icon/teams.png"><p>Teams</p></a>
					<a class="a sm-app"><img src="icon/terminal.png"><p>终端</p></a>
				</div>
			</div>
			<div class="tuijian">
				<!-- 推荐的项目 卡片 -->
				<div class="title">
					<p>推荐的项目</p>
					<div>
						<a class="a more-btn">更多 <i class="bi bi-chevron-right"></i></a>
					</div>
				</div>
				<div class="apps">
					<a class="a tj-obj"><img src="icon/files/www.x6g.com.png"><div><p>xjq.com</p><p>5 分钟前</p></div></a>
					<a class="a tj-obj"><img src="icon/files/img.png"><div><p>可口可乐瓶盖.jpg</p><p>7 分钟前</p></div></a>
					<a class="a tj-obj"><img src="icon/files/img.png"><div><p>瓶盖构造图.jpg</p><p>16 分钟前</p></div></a>
					<a class="a tj-obj"><img src="icon/files/word.png"><div><p>瓶盖的构造及作用.docx</p><p>24 分钟前</p></div></a>
					<a class="a tj-obj"><img src="icon/files/excel.png"><div><p>可口可乐瓶盖厚度.xlsx</p><p>35 分钟前</p></div></a>
				</div>
			</div>
		</div>
	</div>
	<div id="search-win">
		<!-- 搜索框 -->
		<input type="text" class="input" placeholder="在这里输入你要搜索的内容" id="search-input" oninput="
		if(this.value.length>0){
			let rand=['农夫山泉瓶盖简介.txt','瓶盖构造图.png','瓶盖结构说明.docx','可口可乐瓶盖.jpg','可口可乐瓶盖历史.pptx','瓶盖质量统计分析.xlsx','农夫山泉瓶盖.svg','瓶盖介绍.doc'];
			$('#search-win>.ans>.list>list').html('<a href=\'#\'>'+rand[this.value.length%8]+'</a>'+'<a href=\'#\'>'+rand[(this.value.length+3)%8]+'</a>');
		}else
			$('#search-win>.ans>.list>list').html('什么也没有')
		$('#search-span').text(this.value);
		">
		<input-before class="bi bi-search"></input-before>
		<div class="tab">
			<a class="now">全部</a><a>应用</a><a>文档</a><a>网页</a>
			<a>电子邮件</a><a>人员</a><a>设置</a><a>视频</a>
			<a>文件夹</a><a>音乐</a><a>照片</a>
		</div>
		<div class="ans">
			<div class="list">
				<list>
					什么也没有
				</list>
			</div>
			<div class="view">
				<p class="bi bi-search" style="text-align: center;font-size: 50px;"></p>
				<p style="text-align: center;font-size: 25px;">搜索 "<span id="search-span"></span>"</p>
			</div>
		</div>
	</div>
	<div id="dock-box">
		<!-- Dock(任务)栏 -->
		<div class="dock">
			<a class="dock-btn" id="start-btn" onclick="
				if($('#start-menu').hasClass('show')){
					hide_startmenu();
				}
				else{
					$('#start-btn').addClass('show');
					if($('#search-win').hasClass('show')){
						$('#search-btn').removeClass('show');
						$('#search-win').removeClass('show');
						setTimeout(() => {
							$('#search-win').removeClass('show-begin');
						}, 200);
					}
					$('#start-menu').addClass('show-begin');
					setTimeout(() => {
						$('#start-menu').addClass('show');
					}, 0);//非常神奇,我也不知道为什么去掉就不行
				}">
				<!-- 开始按钮 -->
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0,0,306,305">
					<defs><clipPath id="clip0"><rect x="897" y="208" width="306" height="305"></rect>
					</clipPath><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf1">
						<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
						<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
					</linearGradient><linearGradient x1="317.629" y1="13.8595" x2="-11.6295" y2="290.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf2">
						<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
						<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
					</linearGradient><linearGradient x1="885.371" y1="221.859" x2="1214.63" y2="498.141" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf3">
						<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
						<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
					</linearGradient><linearGradient x1="-11.6295" y1="290.141" x2="317.629" y2="13.8595" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="sf4">
						<stop offset="0" stop-color="#A964C8"></stop><stop offset="0.18" stop-color="#A964C8"></stop><stop offset="0.36" stop-color="#A266E4"></stop>
						<stop offset="0.73" stop-color="#346ED8"></stop><stop offset="0.91" stop-color="#2D8AD5"></stop><stop offset="1" stop-color="#2D8AD5"></stop>
					</linearGradient></defs><g clip-path="url(#clip0)" transform="translate(-897 -208)">
						<path d="M936.813 208 1035.2 208 1035.2 208 1036 340.407C1011.65 331.352 986.507 325.493 963.762 325.226 941.508 325.759 919.254 339.075 897 346L897 247.755C897 225.799 914.825 208 936.813 208Z" fill="url(#sf1)" fill-rule="evenodd"></path>
						<path d="M40.0431 0 139 0 139 0 139 140.549C115.82 150.681 92.6407 159.212 69.4611 158.946 45.5026 160.012 23.1537 145.082 0 138.15L0 39.7981C0 17.8182 17.9278 0 40.0431 0Z" fill="url(#sf2)" fill-rule="evenodd" transform="matrix(-1 0 0 1 1203 208)"></path>
						<path d="M1163.19 512 1064.8 512 1064.8 512 1064 379.593C1088.35 388.648 1113.49 394.507 1136.24 394.774 1158.49 394.241 1180.75 380.925 1203 374L1203 472.245C1203 494.201 1185.18 512 1163.19 512Z" fill="url(#sf3)" fill-rule="evenodd"></path>
						<path d="M39.755 0 138 0 138 0 138 140.549C114.987 150.681 91.9742 159.212 68.9614 158.946 45.1752 160.012 22.9872 145.082 0 138.15L0 39.7981C0 17.8182 17.7989 0 39.755 0Z" fill="url(#sf4)" fill-rule="evenodd" transform="matrix(1 -1.22465e-16 -1.22465e-16 -1 897 512)"></path>
					</g></svg>
			</a>
			<a class="dock-btn" id="search-btn" onclick="
			if($('#search-win').hasClass('show')){
				$('#search-btn').removeClass('show');
				$('#search-win').removeClass('show');
				setTimeout(() => {
					$('#search-win').removeClass('show-begin');
				}, 200);
			}
			else{
				$('#search-btn').addClass('show');
				hide_startmenu();
				$('#search-win').addClass('show-begin');
				setTimeout(() => {
					$('#search-win').addClass('show');
				}, 0);
				$('#search-input').focus();
			}">
				<svg width="26" height="26" viewBox="0,0,313,313" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="search-clip1"><rect x="288" y="257" width="313" height="313"/></clipPath><linearGradient x1="338.45" y1="228.45" x2="551.55" y2="597.55" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="search-fill1"><stop offset="0" stop-color="#2983CC"/><stop offset="0.09" stop-color="#2983CC"/><stop offset="0.34" stop-color="#A964C8"/><stop offset="0.77"/><stop offset="1"/></linearGradient></defs><g clip-path="url(#search-clip1)" transform="translate(-288 -257)"><path d="M517.98 458.696C559.356 402.228 547.127 322.905 490.667 281.524 434.207 240.143 354.896 252.373 313.521 308.841 272.145 365.309 284.374 444.631 340.833 486.012 385.458 518.719 446.139 518.698 490.74 485.959L490.721 485.959C491.306 486.739 491.93 487.48 492.632 488.201L567.702 563.282C575.316 570.902 587.664 570.907 595.283 563.292 602.902 555.677 602.906 543.327 595.293 535.707L520.223 460.626C519.526 459.921 518.776 459.269 517.98 458.676ZM523.011 383.732C523.011 442.969 474.997 490.99 415.768 490.99 356.539 490.99 308.525 442.969 308.525 383.732 308.525 324.495 356.539 276.474 415.768 276.474 474.997 276.474 523.011 324.495 523.011 383.732Z" fill="url(#search-fill1)" fill-rule="evenodd"/></g></svg>
			</a>
		</div>
		<div class="dock" id="taskbar" style="display: none;" count="0">
		</div>
		<div class="dock about"
			onclick="if($(this).hasClass('show')){$(this).removeClass('show')}else{$(this).addClass('show')}">
			Windows 12 网页版 xjq
			<p>Windows 12 网页版是一个开放源项目,<br>
				希望让用户在网络上预先体验 Windows 12,<br>
				内容可能与 Windows 12 正式版本不一致。<br>
				使用标准网络技术,例如 Html,CSS 和 JS<br>
				此项目绝不附属于微软,且不应与微软操作系统或产品混淆,<br>
				这也不是 Windows365 cloud PC<br>
				本项目中微软、Windows和其他示范产品是微软公司的商标</p>
		</div>
	</div>
	<div class="window setting">
		<div class="titbar">
			<img src="icon/setting.png" class="icon"><p>设置</p>
			<div>
				<a class="a wbtg red" onclick="hidewin('setting')"><i class="bi bi-x-lg"></i></a>
				<a class="a wbtg max" onclick="maxwin('setting')"><i class="bi bi-app"></i></a>
				<a class="a wbtg" onclick="minwin('setting')"><i class="bi bi-dash-lg"></i></a>
			</div>
		</div>
		<div class="content" id="win-setting">
			<div class="menu">
				<a class="a user">
					<svg viewBox="0,0,257,344" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="user-clip1"><rect x="382" y="195" width="257" height="344"/></clipPath><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill3"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient><linearGradient x1="351.462" y1="233.56" x2="669.496" y2="500.422" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="user-fill4"><stop offset="0" stop-color="#A964C8"/><stop offset="0.35" stop-color="#A964C8"/><stop offset="0.87" stop-color="#2D8AD5"/><stop offset="1" stop-color="#2D8AD5"/></linearGradient></defs><g clip-path="url(#user-clip1)" transform="translate(-382 -195)"><path d="M637.755 433.872C642.215 515.221 579.577 537.983 508.011 537.983 436.444 537.983 376.676 507.833 383.513 437.11 383.109 425.234 389.59 414.133 398.634 409.891 413.82 402.768 444.753 402.936 507.484 402.997 570.214 403.058 609.164 402.279 621.521 407.947 633.878 413.614 638.011 424.609 637.755 433.872Z" fill="url(#user-fill3)" fill-rule="evenodd"/><path d="M422 285C422 235.847 461.623 196 510.5 196 559.377 196 599 235.847 599 285 599 334.153 559.377 374 510.5 374 461.623 374 422 334.153 422 285Z" fill="url(#user-fill4)" fill-rule="evenodd"/></g></svg>
					<div>
						<p>xjq</p>
						<p>www.xjq.com</p>
					</div>
				</a>
				<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
				<input-before class="bi bi-search"></input-before>
				<list>
					<a style="background-color: #ffffff70"><span
						style="background-image: linear-gradient(180deg, #ad6eca, #3b91d8);border-radius: 10px;position: relative;left: -10px;top:1px;height: 20px;margin-right: -4px;">
						&nbsp;</span><img src="apps/icons/setting/system.png">系统</a>
					<a><img src="apps/icons/setting/blueteeth.png">蓝牙和其他设备</a>
					<a><img src="apps/icons/setting/network.png">网络和 Internet</a>
					<a><img src="apps/icons/setting/personal.png">个性化</a>
					<a><img src="apps/icons/setting/apps.png">应用</a>
					<a><img src="apps/icons/setting/user.png">账户</a>
					<a><img src="apps/icons/setting/time.png">时间和语言</a>
					<a><img src="apps/icons/setting/game.png">游戏</a>
					<a><img src="apps/icons/setting/help.png">辅助功能</a>
					<a><img src="apps/icons/setting/safe.png">隐私和安全性</a>
					<a><img src="apps/icons/setting/update.png">Windows 更新</a>
				</list>
			</div>
			<div class="page" style="overflow: auto;">
				<p class="title">系统</p>
				<div style="display: flex;">
					<p class="s-icon" style="font-size: 70px;margin: -8px 10px 0px 20px;"></p>
					<div>
						<p style="font-size: 28px;text-overflow: ellipsis;white-space: nowrap;">Desktop-PingGai</p>
						<p style="color: #7f7f7f;margin:-8px 0 -5px 0;">瓶盖</p>
						<a style="color: #2983cc;text-decoration: underline;">重命名</a>
					</div>
				</div>
				<div class="setting-list">
					<a><icon></icon><div><p>显示</p><p>显示器、亮度、夜间模式、显示描述</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>声音</p><p>声音级别、输入、输出、声音设备</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>通知</p><p>来自系统和应用的警报</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>专注助手</p><p>通知、自动规则</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon class="b">&#xF186;</icon><div><p>电源</p><p>睡眠、电池使用情况、节电模式</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>存储</p><p>存储空间、驱动器、配置规则</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>多任务处理</p><p>贴靠窗口、桌面、任务切换</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>激活</p><p>激活状态、订阅、产品密钥</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>疑难解答</p><p>建议的疑难解答、首选项和历史记录</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>恢复</p><p>重置、高级启动、返回</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>投影到此电脑</p><p>权限、配对 PIN、可发现性</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>远程桌面</p><p>远程桌面用户、连接权限</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>剪贴板</p><p>剪贴和复制历史记录、同步、清除</p></div><i class="bi bi-chevron-right"></i></a>
					<a><icon></icon><div><p>关于</p><p>设备规格、重命名电脑、Windows 规格</p></div><i class="bi bi-chevron-right"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="window explorer">
		<div class="titbar">
			<img src="icon/explorer.png" class="icon">
			<p>文件资源管理器</p>
			<div>
				<a class="a wbtg red" onclick="hidewin('explorer')"><i class="bi bi-x-lg"></i></a>
				<a class="a wbtg max" onclick="maxwin('explorer')"><i class="bi bi-app"></i></a>
				<a class="a wbtg" onclick="minwin('explorer')"><i class="bi bi-dash-lg"></i></a>
			</div>
		</div>
		<div class="content" id="win-explorer">
			<div class="menu">
				<div class="card pinned">
					<p class="title"><span style="font: 15px;">📌</span> 已固定</p>
					<list>
						<a><img src="apps/icons/explorer/qa.png">快速访问</a>
						<a><img src="apps/icons/explorer/od.png">OneDrive</a>
						<a class="check"><span
							style="background-image:linear-gradient(180deg, #ad6eca, #3b91d8);width:4px;height: 19px;border-radius: 10px;margin-left: -12px;margin-right: 8px;margin-top: 1px;"></span>
							<img src="apps/icons/explorer/thispc.png">此电脑</a>
						<a><img src="apps/icons/explorer/rb.png">回收站</a>
					</list>
				</div>
				<div class="card tags">
					<p class="title"><span style="font: 15px;">🏷</span> 标签</p>
					<list>
						<a><span style="background-color: red;"></span>红色</a>
						<a><span style="background-color: #3981d9;"></span>蓝色</a>
						<a><span style="background-color: yellow;"></span>黄色</a>
						<a><span style="background-color: green;"></span>绿色</a>
						<a><span style="background-color: #fc9816;"></span>橙色</a>
						<a><span style="background-color: purple;"></span>紫色</a>
						<a><span style="background-color: #ffcad4;"></span>粉色</a>
					</list>
				</div>
			</div>
			<div class="main">
				<div class="tool">
					<a class="a b t"><img src="apps/icons/explorer/tool-new.png">新建</a><div class="hr"></div>
					<a class="a b"><img src="apps/icons/explorer/tool-cut.png"></a>
					<a class="a b"><img src="apps/icons/explorer/tool-copy.png"></a>
					<a class="a b"><img src="apps/icons/explorer/tool-paste.png"></a>
					<a class="a b"><img src="apps/icons/explorer/tool-rename.png"></a><div class="hr"></div>
					<a class="a b t"><img src="apps/icons/explorer/tool-sort.png">排序方式</a>
					<a class="a b t"><img src="apps/icons/explorer/tool-view.png">布局</a>
				</div>
				<div class="content">
					<div class="tool">
						<a class="a btn btn-icon"><i class="bi bi-arrow-left"></i></a>
						<a class="a btn btn-icon"><i class="bi bi-arrow-right"></i></a>
						<a class="a btn btn-icon"><i class="bi bi-arrow-up"></i></a>
						<p class="tit"><img src="apps/icons/explorer/thispc.png">此电脑</p>
						<div class="search">
							<input type="text" class="input" placeholder="在这里输入你要搜索的内容">
							<input-before class="bi bi-search"></input-before>
						</div>
					</div>
					<p class="title">此电脑</p>
					<p class="class"><img src="apps/icons/explorer/disk.png"> 设备和驱动器</p>
					<div class="group">
						<a class="a item">
							<img src="apps/icons/explorer/diskwin.png">
							<div>
								<p class="name">本地磁盘 (C:)</p>
								<div class="bar">
									<div class="content" style="width: 88%;"></div>
								</div>
								<p class="info">32.6 GB 可用, 共 143 GB</p>
							</div>
						</a>
						<a class="a item">
							<img src="apps/icons/explorer/disk.png">
							<div>
								<p class="name">本地磁盘 (D:)</p>
								<div class="bar">
									<div class="content" style="width: 15%;"></div>
								</div>
								<p class="info">185.3 GB 可用, 共 216 GB</p>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="window calc">
		<div class="titbar">
			<img src="icon/calc.png" class="icon">
			<p>计算器</p>
			<div>
				<a class="a wbtg red" onclick="hidewin('calc')"><i class="bi bi-x-lg"></i></a>
				<a class="a wbtg max" style="pointer-events: none;color: #aaa;"><i class="bi bi-app"></i></a>
				<a class="a wbtg" onclick="minwin('calc')"><i class="bi bi-dash-lg"></i></a>
			</div>
		</div>
		<div class="content" id="win-calc">
			<input id="calc-input" value="">
			<div class="keyb">
				<a class="a b" onClick="document.getElementById('calc-input').value*=document.getElementById('calc-input').value">𝑥²</a>
				<a class="a b" onClick="document.getElementById('calc-input').value=Math.sqrt(document.getElementById('calc-input').value)">√𝑥</a>
				<a class="a b" onClick="document.getElementById('calc-input').value=''">C</a>
				<a class="a b u" onClick="document.getElementById('calc-input').value+='+'">+</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='7'">7</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='8'">8</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='9'">9</a>
				<a class="a b u" onClick="document.getElementById('calc-input').value+='-'">-</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='4'">4</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='5'">5</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='6'">6</a>
				<a class="a b u" onClick="document.getElementById('calc-input').value+='*'">×</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='1'">1</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='2'">2</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='3'">3</a>
				<a class="a b u" onClick="document.getElementById('calc-input').value+='/'">÷</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='.'">.</a>
				<a class="a b" onClick="document.getElementById('calc-input').value+='0'">0</a>
				<a class="a b" onClick="document.getElementById('calc-input').value=document.getElementById('calc-input').value.substring(0,document.getElementById('calc-input').value.length-1);"><i class="bi bi-backspace"></i></a>
				<a class="a b ans u" onClick="document.getElementById('calc-input').value=eval(document.getElementById('calc-input').value)"> =</a>
			</div>
		</div>
	</div>
	<div class="window about">
		<div class="titbar">
			<img src="icon/about.png" class="icon">
			<p>关于 Windows12 网页版</p>
			<div>
				<a class="a wbtg red" onclick="hidewin('about')"><i class="bi bi-x-lg"></i></a>
				<a class="a wbtg max" onclick="maxwin('about')"><i class="bi bi-app"></i></a>
				<a class="a wbtg" onclick="minwin('about')"><i class="bi bi-dash-lg"></i></a>
			</div>
		</div>
		<div class="content" id="win-about">
			<div class="menu">
				<list>
					<a onclick="$('#win-about>.about').show(200);$('#win-about>.update').hide();"><img src="apps/icons/about/info.svg" height="17px" width="19px">简介</a>
					<a onclick="$('#win-about>.update').show(200);$('#win-about>.about').hide();"><img src="apps/icons/about/update.svg" height="20px" width="18px">更新记录</a>
				</list>
			</div>
			<div class="cnt about">
				<h1 class="tit"><span></span>Windows 12 网页版</h1>
				<div style="margin-left: 20px;">
					<h2 class="tit"><span></span>简介</h2>
					<p>&emsp;&emsp;Windows 12 网页版是一个开源项目, 由谭景元原创, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验 Windows 12。</p>
					<p>&emsp;&emsp;因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。</p>
					<p>&emsp;&emsp;由于这是一个开源项目，你可以在任何媒介以任何形式复制、发行本作品。
						你还可以对该项目进行修改、转换或以本作品为基础进行创作。
						但您必须给出适当的署名，您必须提供创作者姓名、作品链接，同时标明是否对此作了修改。您可以用任何合理的方式来署名，但是不得以任何方式暗示许可方认可您或您的使用。</p>
					<p>&emsp;&emsp;此项目绝不附属于微软,且不应与微软操作系统或产品混淆, 这也不是 Windows365 cloud PC</p>
					<p>&emsp;&emsp;本项目中微软、Windows和其他示范产品是微软公司的商标</p>
				</div>
				<div style="margin-left: 20px;">
					<h2 class="tit"><span></span>其它</h2>
					<p>&emsp;&emsp;此项目已发布至 Github, <a href="https://github.com/tjy-gitnub/win12" class="jump">点击此处查看</a></p>
					<p>&emsp;&emsp;若您对于该项目有任何意见或建议，请在 Github 上<a href="https://github.com/tjy-gitnub/win12/issues" class="jump">提交 issues</a>, 您的问题会被尽可能快地解决</p>
				</div>
			</div>
			<div class="cnt update" style="display: none;">
				<h1 class="tit"><span></span>更新记录</h1>
				<div style="margin-left: 20px;">
					<details><summary><span>v1.1.2</span> 外观优化</summary>
						<p>&emsp;&emsp;-透明效果改善<br>
						&emsp;&emsp;-在所有应用中使用主题色(蓝紫渐变)<br>
						&emsp;&emsp;-Dock(任务)栏圆角优化<br>
						&emsp;&emsp;-在设置中使用新的头像<br>
						&emsp;&emsp;-加速窗口动画，更加贴近原生<br>
					</details>
					<details><summary><span>v1.1.1</span> 外观优化，修复了一些 Bug</summary>
						<p>&emsp;&emsp;-外观优化，阴影增加<br>
						&emsp;&emsp;-修复了开始、搜索菜单关闭时高度会闪一下的问题<br>
						&emsp;&emsp;-开始菜单用户头像美化<br>
						&emsp;&emsp;-修复了"关于"应用切换标签时文字改变导致动画流畅的问题<br>
						&emsp;&emsp;-使页面不能滚动，更加逼真<br>
					</details>
					<details><summary><span>v1.1.0</span> 增加最小化功能,图标美化</summary>
						<p>&emsp;&emsp;-新增最小化窗口功能<br>
						&emsp;&emsp;-图标部分美化<br>
						&emsp;&emsp;-开始、搜索按钮点击动画美化<br>
						&emsp;&emsp;-修复计算器 "𝑥²" 键无效的问题<br>
						&emsp;&emsp;-修复窗口打开并最大化后最小化不正常的问题<br>
						&emsp;&emsp;-修复多次打开应用任务栏显示错误的问题<br>
						&emsp;&emsp;-简化js关于拖动窗口的代码</p>
					</details>
					<details><summary><span>v1.0.1</span> Bug和一些错别字</summary>
						<p>&emsp;&emsp;上传了才发现有 Bug 😅</p>
					</details>
					<details><summary><span>v1.0.0</span> 计算器功能增加，优化体验与开始菜单，新增关于应用</summary>
						<p>&emsp;&emsp;-使开始菜单和搜索窗口在高度不足的页面中更好地显示，页面高度过小也可能显示不全，还是建议使用电脑<br>
						&emsp;&emsp;-计算器增加平方与开方功能<br>
						&emsp;&emsp;-开始菜单中不可用应用用灰色显示，更加简洁方便<br>
						&emsp;&emsp;-新增 "关于Win12网页版" 应用，包含关于本项目的说明和历史更新记录<br>
						&emsp;&emsp;-优化开始菜单和搜索窗口的显示动画<br>
						&emsp;&emsp;-优化电脑端按钮的体验</p>
					</details>
				</div>
			</div>
		</div>
	</div>
	<script src="desktop.js"></script>
</body>
</html>